<!--
 * @Author: lizuoqun
 * @Date: 2022-09-11 15:55:44
 * @LastEditors: lizuoqun
 * @LastEditTime: 2022-09-11 16:03:23
 * @Description: 3d 文字特效
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3d-text</title>
</head>
<style>
  html,
  body {
    width: 90%;
    height: 90%;
    padding: 0;
    margin: 10px;
    background-color: #8fb2c9;
  }

  .text {
    font-size: 50px;
    user-select: none;
    align-items: center;
    color: white;
    outline: none;
    text-shadow: -1px 1px #000, -2px 2px #000, -3px 3px #000, -4px 4px #000,
      -5px 5px #000, -12px 12px 5px #000;
  }

  .custom-select {
    position: relative;
    display: inline-block;
  }

  .dropdown {
    position: relative;
    width: 150px;
    border: 1px solid #999;
    padding: 5px;
    cursor: pointer;
  }

  .dropdown .selected-option {
    display: block;
    background-color: #fff;
  }

  .dropdown .options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #999;
  }

  .dropdown .options .option {
    padding: 5px;
  }

  .dropdown.open .options {
    display: block;
  }

  h1::before {
    content: '';
    height: 4px;
    background: red;
    /* 伪元素默认样式 display: inline;所以需要转成inline-block宽高才会生效 */
    display: inline-block;
    /* 通过定位使下划线在最低层 */
    position: absolute;
    top: 270px;
    width: 0;
    /* 加上一个过渡效果，使之丝滑一些 */
    transition: width .76s;
  }

  h1:hover::before {
    /* 悬浮时候，让下划线伪元素宽度变成100%即可出现效果 */
    width: 500px;
  }

  h3 {
    /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
    width: 12em;
    /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
             注意step和字数保持一致，光标动画也是同理，*/
    animation: typingWords 5s steps(12) infinite, cursor 0.5s steps(1) infinite;
    white-space: nowrap;
    overflow: hidden;
    /* 使用右边框作为打印的指针光标 */
    border-right: 1px solid #000;
  }

  @keyframes typingWords {
    0% {
      width: 0;
    }
  }

  @keyframes cursor {
    50% {
      border-color: transparent;
    }
  }

  .box-2 {
    width: 500px;
    height: 300px;
    background: linear-gradient(to right, #ccc, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text-2 {
    color: #e6e6e6;
    font-family: '宋徽宗瘦金体';
    font-weight: 600;
    font-size: 80px;
    text-shadow: 1px -1px #fff, -1px 1px #999, -5px 5px 5px #808080;
  }
</style>

<body>
  <div class="text" contenteditable>This is 3D text</div>
  <hr />
  <div style="width: 100px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
    title="这是一段较长的文本，如果文本过长会自动截取并用省略号代替">这是一段较长的文本，如果文本过长会自动截取并用省略号代替</div>

  <select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
  </select>
  <div class="custom-select">
    <div class="dropdown">
      <span class="selected-option">请选择</span>
      <div class="options">
        <div class="option"><input type="checkbox" value="option1">选项1</div>
        <div class="option"><input type="checkbox" value="option2">选项2</div>
        <div class="option"><input type="checkbox" value="option3">选项3</div>
        <div class="option"><input type="checkbox" value="option4">选项4</div>
      </div>
    </div>
  </div>

  <hr />

  <h1>江畔何人初见月，江月何年初照人</h1>

  <hr />

  <h3>江畔何人初见月，江月何年初照人</h3>

  <hr />
  <div class="box-2">
    <div class="text-2">
      宋徽宗瘦金体
    </div>
  </div>
</body>
<script>
  const dropdown = document.querySelector('.dropdown');
  const selectedOption = document.querySelector('.selected-option');

  dropdown.addEventListener('click', function () {
    dropdown.classList.toggle('open');
  });

  const options = document.querySelectorAll('.option input[type="checkbox"]');
  options.forEach(function (option) {
    option.addEventListener('change', function () {
      let selectedOptions = [];
      options.forEach(function (checkbox) {
        if (checkbox.checked) {
          selectedOptions.push(checkbox.value);
        }
      });
      selectedOption.textContent = selectedOptions.join(', ');
    });
  });
</script>

</html>